<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="snorderParams.merchantNo" placeholder="商户名称" filterable clearable class="filter-item" @change="getShopListAll" style="width: 160px">
        <el-option v-for="item in merchantListAll" :key="item.key" :label="item.merchantName" :value="item.merchantNo" />
      </el-select>
      <el-select v-model="snorderParams.shopId" placeholder="店铺名称" filterable clearable class="filter-item" style="width: 160px">
        <el-option v-for="item in shopListAll" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="snorderParams.sn" placeholder="输入设备SN号" style="width: 260px;" class="filter-item" clearable />
      <el-date-picker
        v-model="snorderModDate"
        class="filter-item"
        :editable="false"
        :clearable="false"
        value-format="timestamp"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        style="width: 380px;">
      </el-date-picker>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getSnorderSearch">搜索</el-button>
    </div>
    <el-table
          v-loading="listLoading"
          :data="snorderLists"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row>
      <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center">
      </el-table-column>
      <el-table-column
              prop="shopName"
              label="店铺名称"
              align="center">
      </el-table-column>
      <el-table-column
              prop="sn"
              label="设备sn号"
              width="230"
              align="center">
      </el-table-column>
      <el-table-column
              prop="wxSum"
              label="微信扫码"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="aliSum"
              label="支付宝扫码"
              align="center"
              width="100">
      </el-table-column>
      <el-table-column
              prop="wxfaceSum"
              label="刷脸"
              align="center"
              width="50">
      </el-table-column>
      <el-table-column
              prop="otherSum"
              label="其他"
              align="center"
              width="50">
      </el-table-column>
      <el-table-column
              prop="totalSum"
              label="总笔数"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="validWxfaceOne"
              label="刷脸≥2元"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="validWxfaceTwo"
              label="日去重≥2"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="activateTime"
              label="激活时间"
              width="100"
              :formatter="timeFormat"
              align="center">
      </el-table-column>
    </el-table>
    <pagination v-show="snorderTotal>0" :total="snorderTotal" :page.sync="snorderParams.current" :limit.sync="snorderParams.size" @pagination="getSnorderList" />
  </div>
</template>

<script>
import { snorderList,ztShopAll,merchantShopAll } from "@/api/api.verify.js"
import Pagination from '@/components/Pagination'
export default {
  components:{Pagination},
  name: 'SnorderList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      merchantListAll:[],//所有商超名称列表
      shopListAll:[],//所有店铺名称列表
      snorderLists:[],//sn统计列表
      snorderTotal:0,//sn统计列表总条数
      snorderModDate:[this.common.getTimeStamp0(-1)*1000,this.common.getTimeStamp24(-1)*1000],//sn查询日期
      snorderParams:{
        current: 1,
        size: 10,
        merchantNo:null,//商超ID
        createAt:this.common.getTimeStamp0(-1),//开始时间,
        modAt:this.common.getTimeStamp24(-1),//结束时间
        shopId:null,//店铺ID
        sn:null,//设备SN号
      },//sn统计列表查询条件
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){
      this.getMerchantListAll()
      this.getShopListAll()
      this.getSnorderList()
    },
    getMerchantListAll(){//获取所有商户名称列表
      let _this=this;
      merchantShopAll({}).then(d=>{
        _this.merchantListAll=d.data
      })
    },
    getShopListAll(e){//获取所有店铺名称列表
      let _this=this
      let data={}
      if(e){
        data.shopNo=e
      }
      ztShopAll(data).then(d=>{
        _this.shopListAll=d.data
      })
    },
    getSnorderList(){//获取sn统计列表
      let _this=this
      let data=this.snorderParams
      this.listLoading=true
      snorderList(data).then(d=>{
        _this.snorderLists=d.data.pageInfo.records
        _this.snorderTotal=Number(d.data.pageInfo.total)
      }).finally(d=>{
        _this.listLoading = false
      })
    },
    getSnorderSearch(){//查询sn统计列表
      this.snorderParams.current=1
      this.getSnorderList()
    },

    timeFormat(row, column, cellValue, index) {//时间戳转换日期
      return this.common.getLocalTime(parseInt(cellValue) * 1000,1);
    },
  },
  watch:{
    'snorderParams.merchantNo':function(val){
      let _this=this;
      if(val==""){
        _this.snorderParams.merchantNo=null
      }
    },
    'snorderParams.shopId':function(val){
      let _this=this;
      if(val==""){
        _this.snorderParams.shopId=null
      }
    },
    snorderModDate: function () {
        if (this.snorderModDate == null) {
            this.snorderParams.createAt = null
            this.snorderParams.modAt = null
            return
        }
        this.snorderParams.createAt = parseInt(this.snorderModDate[0] / 1000)
        this.snorderParams.modAt = parseInt(this.snorderModDate[1] / 1000)
    },
    'snorderParams.sn':function(e){
      if(e==''){
        this.snorderParams.sn=null
      }
    }
  }
}
</script>
